<template>
    <div class="login-form">
    
        <!-- 输入框 -->
        <div class="center-form">
            <el-form ref="ruleFormRef" :model="form" :rules="rules">
                <!-- 在form-item身上绑定校验规则 -->
                <el-form-item prop="email">
                    <el-input placeholder="请输入您的账号" clearable size="large" v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        placeholder="请输入密码"
                        show-password
                        size="large"
                        v-model="form.password"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" class="upuserup" @click="submitForm(ruleFormRef)">
                        登录
                        <el-icon class="el-icon--right" size="large" style="margin-left:14px">
                            <ArrowRight />
                        </el-icon>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 忘记密码界面与注册界面的跳转 -->
        <div class="footer">
            <!-- <router-link to="/login">Login</router-link> -->
            <router-link
                to="/forget"
                style="text-decoration:none; position:absolute;left:10%;top:30%;color:white"
            >忘记密码</router-link>
            <router-link
                to="/Reg"
                style="text-decoration:none; position:absolute;left:85%;top:30%;color:white"
            >注册</router-link>
        </div>
    </div>
</template>


<script setup lang='ts'>
import { ref, toRaw } from 'vue'
import {  FormInstance } from 'element-plus'
import { postLogin } from './../../api/common'
import { onMounted } from 'vue';
import { anyTypeAnnotation } from '@babel/types';


//命名式路由模式

import { useRouter,useRoute } from 'vue-router'

//实现路由的跳转
const router = useRouter()

const route = useRoute()
const ruleFormRef = ref<FormInstance>()

//    onMounted(() => {
//        postLogin(form.value).then(res=>{
//        console.log("3...onMounted()组件挂在到页面之后执行")
//        }).catch(errors => console.log(errors));

//     });

const form = ref(
    {
        email: '',
        password: ''
    }
)
// 定义校验规则 ref里面放着一个对象，一个key值，key值对应的数组
const rules = ref(
    {
        email: [
            {

                //必填项
                required: true,
                //提示语
                message: '请输入你的邮箱',
                //触发条件的方式
                trigger: 'blur'
            },
            {
                type: "email",
                //必填项

                //提示语
                message: '邮箱格式不正确',
                //触发条件的方式
                trigger: 'blur'
            }
        ],
        password: [
            {
                //必填项
                required: true,
                //提示语
                message: '请输入你的密码,密码必须包含大小写数字',
                //触发条件的方式
                trigger: 'blur'
            }

        ]

    }
)

// 统一校验
const submitForm = async (formEl: FormInstance | undefined) => {

    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            
            console.log('submit!')
            //打印出来提交的数据
            console.log(toRaw(form.value))
            //请求提交
            const logindata = postLogin(form.value)
            console.log(logindata)
            logindata.then(res => {
                console.log(res+'开始路由跳转')
                   //路由跳转
                 
                let redirect =route.query.redirect||'/main'
                    console.log('wwwwwwwwwwwww')
                      console.log( typeof redirect)

                if(typeof redirect!== 'string')
                {
                    redirect='/main'
                       
                }
              
                router.replace(redirect)
          
            })

           


        } else {

            console.log('error submit!', fields)
        }
    })
}

</script>


<style  scoped>
.login-form {
    position: absolute;
    width: 70%;
    height: 40%;
    left: 50%;
    top: 60%;
    /* background: red; */

    transform: translate(-50%, -50%);
}
.center-form {
    width: 90%;
    height: 78%;
    /* // background: black; */
    position: absolute;
    top: 16%;
    left: 0;
    right: 0;
    margin: auto;
}
.footer {
    width: 100%;
    height: 15%;
    /* // background: yellow; */

    position: absolute;
    left: 0;
    /* // top: 0; */
    bottom: 0;
    right: 0;
    margin: auto;
}
.el-input {
    height: 33%;
    width: 86%;
    left: 9%;
    top: 10%;
    display: inline-block;

    text-align: center;
    font-size: 16px;
}
/* ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.vue3.0版本 */
:deep(.el-input__inner) {
    height: 60px;
    background: #43494e;
    color: black;
}

.el-button {
    width: 86%;
    margin-left: 9%;
    height: 58px;
    margin-top: 0%;
    background: #007eff;
}
:deep(.el-form-item__content) {
    height: 20%;
}
:deep(.el-form-item__error) {
    left: 9%;
}
</style>